<style include="shared-style cr-icons">
  :host {
    align-items: center;
    color: inherit;
    display: flex;
    flex-direction: row;
    height: 40px;
    padding-inline-start: 20px;
    position: relative;
    text-decoration: none;
    user-select: none;
  }

  :host([is-selected-item_]) {
    background-color: var(--highlight-color);
  }

  :host-context([enable-branding-update]):host {
    --iron-icon-fill-color: var(--google-grey-700);
  }

  :host-context([enable-branding-update]):host([is-selected-item_]) {
    --iron-icon-fill-color: var(--google-blue-600);
  }

  @media (prefers-color-scheme: dark) {
    :host([is-selected-item_]),
    :host([is-selected-item_]) .folder-icon {
      --cr-icon-button-focus-outline-color: white;
      color: var(--google-grey-700);
    }

    :host-context([enable-branding-update]):host {
      --iron-icon-fill-color: var(--google-grey-500);
    }

    :host-context([enable-branding-update]):host([is-selected-item_]) {
      --iron-icon-fill-color: black;
    }
  }

<if expr="is_macosx">
  .folder-icon {
    margin: 2px;
  }
</if>

  #website-text {
    display: flex;
    flex: 1;
    overflow: hidden;
  }

  #website-title {
    color: var(--cr-primary-text-color);
    flex: 1;
    margin-inline-start: 20px;
    text-decoration: none;
  }

  :host([is-selected-item_]) #website-title {
    flex: 0 auto;
  }

  @media (prefers-color-scheme: dark) {
    :host([is-selected-item_]) #website-title {
      color: var(--google-grey-900);
    }
  }

  #website-url {
    /* Transparent version of --cr-secondary-text-color */
    color: rgba(0, 0, 0, 0.54);
    display: none;
    flex: 1;
    margin-inline-start: 20px;
    min-width: 100px;
  }

  @media (prefers-color-scheme: dark) {
    #website-url {
      color: var(--google-grey-800);
    }
  }

  :host([is-selected-item_]) #website-url {
    display: block;
  }

  #icon {
    flex: none;
  }

  cr-icon-button {
    margin-inline-end: 12px;
  }

  @media (prefers-color-scheme: dark) {
    :host([is-selected-item_]) cr-icon-button {
      --cr-icon-button-fill-color: var(--google-grey-700);
    }
  }

  :host(:focus) {
    z-index: 1;
  }

  .elided-text {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
</style>
<div id="icon"></div>
<div id="website-text" role="gridcell">
  <div id="website-title" class="elided-text" title="[[item_.title]]">
    [[item_.title]]
  </div>
  <div id="website-url" class="elided-text" title="[[getItemUrl_(item_)]]">
    [[getItemUrl_(item_)]]
  </div>
</div>
<div role="gridcell">
  <cr-icon-button class="icon-more-vert"
      id="menuButton"
      tabindex="[[ironListTabIndex]]"
      title="$i18n{moreActionsButtonTitle}"
      aria-label$="[[getButtonAriaLabel_(item_, isSelectedItem_,
          isMultiSelect_)]]"
      on-click="onMenuButtonClick_"
      aria-haspopup="menu"></cr-icon-button>
</div>
